
<template>
<!-- :class="whiteShow?'white':'black'" -->
    <div class="layout" >
        <Layout>
            <Header>
                <div class="layout-logo jg-logo">
                   <div class="img-box">
                        <img src="@/assets/images/youhua.png" width="40px" height="40px">
                   </div>
                   <h4 class="lay-font">网站管理系统</h4>
                </div>

                <!-- 收缩侧边栏 -->
                <i-header-collapse v-if="(isMobile || showSiderCollapse) && !hideSider" @on-toggle-drawer="handleToggleDrawer" />
                   <i-header-reload v-if="!isMobile && showReload" @on-reload="handleReload" />
                <div class="i-layout-header-right">
                    <i-header-theme/>
                    <i-header-project @on-reload="handleReload" />
                    <i-header-user />
                </div>
            </Header>
            <Layout>
                <Sider v-if="!isMobile && !hideSider" class="i-layout-sider hq-layout-sider" :class="siderClasses"  :width="menuSideWidth">
                    <!-- <i-menu-head v-if="home" ref="menuHead" /> -->
                    <i-menu-side :hide-logo="isHeaderStick && headerFix && showHeader" />
                </Sider>
                <Layout :style="{padding: '24px',}">
                      <transition name="fade-quick" :style="{margin: '24px 0'}">
                        <i-tabs v-if="tabs" v-show="showHeader" @on-reload="handleReload" />
                        </transition>
                    <Content class="i-layout-content" :class="contentClasses">
                        <div class="jg-content">
                            <!-- <keep-alive :include="keepAlive"> -->
                                <router-view v-if="loadRouter" />
                            <!-- </keep-alive> -->
                        </div>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    </div>
</template>
<script>
    import iHeaderProject from './header-project';
    import iHeaderUser from './header-user';
    import iMenuHead from './menu-head';
    import iMenuSide from './menu-side';
    import iHeaderTheme from './header-theme';
    import iHeaderCollapse from './header-collapse';
    import iHeaderReload from './../../layouts/basic-layout/header-reload';
    import iHeaderBreadcrumb from './../../layouts/basic-layout/header-breadcrumb';
    import iHeaderSearch from './../../layouts/basic-layout/header-search';
    import iHeaderLog from './../../layouts/basic-layout/header-log';
    import iHeaderFullscreen from './../../layouts/basic-layout/header-fullscreen';
    import iHeaderNotice from './../../layouts/basic-layout/header-notice';
    import iHeaderSetting from './../../layouts/basic-layout/header-setting';
    import iTabs from './tabs';
    import iCopyright from '@/components/copyright';
    import { mapState, mapGetters, mapMutations } from 'vuex';
    import Setting from '@/setting';
    import util, { requestAnimation } from '@/libs/util';
    export default {
        name: 'basic-control',
        components: {
            iHeaderProject,
            iHeaderUser,
            iMenuHead,
            iMenuSide,
            iHeaderTheme,
            iHeaderCollapse,
            iHeaderReload,
            iHeaderBreadcrumb,
            iHeaderSearch,
            iHeaderLog,
            iHeaderFullscreen,
            iHeaderNotice,
            iHeaderSetting,
            iTabs,
            iCopyright
        },
        data () {
            return {
                currentIndex: 1,
                isCollapsed: false,
                isShow: false,
                isactive: false,
                loadRouter: true,
                show: process.env.NODE_ENV_DIST,
                showDrawer: false,
                isDelayHideSider: false, // hack，当从隐藏侧边栏的 header 切换到正常 header 时，防止 Logo 抖动
                home: util.storage.get('home'),
                params: { id: 0 }
            };
        },
        computed: {
            ...mapState('admin/layout', [
                'siderTheme',
                'headerTheme',
                'headerStick',
                'tabs',
                'tabsFix',
                'siderFix',
                'headerFix',
                'headerHide',
                'headerMenu',
                'isMobile',
                'isTablet',
                'isDesktop',
                'menuCollapse',
                'showMobileLogo',
                'showSearch',
                'showNotice',
                'showFullscreen',
                'showSiderCollapse',
                'showBreadcrumb',
                'showLog',
                'showI18n',
                'showReload',
                'enableSetting'
            ]),
            ...mapState('admin/page', [
                'keepAlive'
            ]),
            ...mapGetters('admin/menu', [
                'hideSider'
            ]),
            // 如果开启 headerMenu，且当前 header 的 hideSider 为 true，则将顶部按 headerStick 处理
            // 这时，即使没有开启 headerStick，仍然按开启处理
            isHeaderStick () {
                let state = this.headerStick;
                if (this.hideSider) state = true;
                return state;
            },
            showHeader () {
                let visible = true;
                if (this.headerFix && this.headerHide && !this.headerVisible) visible = false;
                return visible;
            },
            headerClasses () {
                return [
                    `i-layout-header-color-${this.headerTheme}`,
                    {
                        'i-layout-header-fix': this.headerFix,
                        'i-layout-header-fix-collapse': this.headerFix && this.menuCollapse,
                        'i-layout-header-mobile': this.isMobile,
                        'i-layout-header-stick': this.isHeaderStick && !this.isMobile,
                        'i-layout-header-with-menu': this.headerMenu,
                        'i-layout-header-with-hide-sider': this.hideSider || this.isDelayHideSider
                    }
                ];
            },
            headerStyle () {
                const menuWidth = this.isHeaderStick ? 0 : this.menuCollapse ? 60 : Setting.menuSideWidth;
                return this.isMobile || !this.headerFix ? {} : {
                    width: `calc(100% - ${menuWidth}px)`
                };
            },
            siderClasses () {
                return {
                    // 'i-layout-sider-fix': this.siderFix,
                    'i-layout-sider-dark': this.siderTheme === 'dark',
                    'homeclass': this.home
                };
            },
            contentClasses () {
                return {
                    // 'i-layout-content-fix-with-header': this.headerFix,
                    // 'i-layout-content-with-tabs': this.tabs,
                    // 'i-layout-content-with-tabs-fix': this.tabs && this.tabsFix
                };
            },
            insideClasses () {
                return {
                    'i-layout-inside-fix-with-sider': this.siderFix,
                    'i-layout-inside-fix-with-sider-collapse': this.siderFix && this.menuCollapse,
                    'i-layout-inside-with-hide-sider': this.hideSider,
                    'i-layout-inside-mobile': this.isMobile
                };
            },
            drawerClasses () {
                let className = 'i-layout-drawer';
                if (this.siderTheme === 'dark') className += ' i-layout-drawer-dark';
                return className;
            },
            menuSideWidth () {
                return this.menuCollapse ? 60 : Setting.menuSideWidth;
            }
        },
        watch: {
            '$route' (to, from) {
                this.home = util.storage.get('home')
                if (to.name === from.name) {
                    // 相同路由，不同参数，跳转时，重载页面
                    if (Setting.sameRouteForceUpdate) {
                        this.handleReload();
                    }
                }
            }
        },
        methods: {
            ...mapMutations('admin/layout', [
                'updateMenuCollapse'
            ]),
            ...mapMutations('admin/page', [
                'keepAlivePush',
                'keepAliveRemove'
            ]),
            handleToggleDrawer (state) {
                // debugger
                if (typeof state === 'boolean') {
                    this.showDrawer = state;
                } else {
                    this.showDrawer = !this.showDrawer;
                }
            },
            handleReload () {
                // 针对缓存的页面也生效
                const isCurrentPageCache = this.keepAlive.indexOf(this.$route.name) > -1;
                const pageName = this.$route.name;
                if (isCurrentPageCache) {
                    this.keepAliveRemove(pageName);
                }
                this.loadRouter = false;
                this.$nextTick(() => {
                    this.loadRouter = true;
                    if (isCurrentPageCache) {
                        this.keepAlivePush(pageName);
                    }
                });
            }
        }
    }
</script>
<style lang="less" scoped>
.ivu-dropdown-rel{
    .ivu-icon {
        font-size:20px;
        cursor:pointer
    }
}
.navs{
    cursor: pointer;
}
/deep/.i-layout-sider{
    min-height: 100%;
}

.homeclass{
    width: 60px !important;
    min-width:60px !important;
    flex:0 0 60px !important;
}
.hq-layout-sider{
    transition-duration: 0s !important;
}
.jg-content{
    margin-top:24px;
}
.jg-logo{
    display: flex;
    .img-box{
        margin-top:12px
    }
    .lay-font{
        margin-left: 40px;
    }
}
</style>
